<template>
  <el-dialog
    title="博客正文"
    :visible.sync="dialogVisible"
    width="60%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">
    <div>
      <span>博客标签: </span>
      <el-tag type="info" v-for="(tag, index) in tagNames" :key="'t' + index" class="tag-item">
        {{ tag }}
      </el-tag>
    </div>
    <p class="b-c-title">博客正文: </p>
    <div class="ql-container ql-snow b-content">
      <div v-html="content" class="ql-editor"></div>
    </div>
<!--    <div v-html="content" class="b-content"></div>-->

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  /* 富文本css*/
  import 'quill/dist/quill.snow.css'

  /*
    博客正文弹出框
  */
  export default {
    name: "blog-content-dialog",
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 博客正文
        content: undefined,
        // 博客关联所有标签名字
        tagNames: undefined,

      }
    },
    methods: {
      // 初始化博客正文
      initBlogContent(blogId) {
        this.$axios.$get('/blog/blog-content/info', { params: { blogId }})
          .then(({ data }) => {
            this.content = data.content
            this.tagNames = data.tagNames
          })
          .catch(() => {})
      },
      // 弹出框关闭处理事件
      closeHandle() {
        this.content = undefined
        this.tagNames = undefined
        // 向上传递事件
        this.$emit('close-b-content-dialog', )
      },
    }

  }
</script>

<!--
  css字符对应
  b -> blog
  c -> check
-->
<style scoped>
  .tag-item {
    color: #6CBCBC;
    margin-left: 10px;
  }
  .b-c-title {
    margin-top: 10px;
  }
  .b-content {
    margin-top: 10px;
    border: 1px solid #6CBCBC !important;
    border-radius: 5px;
  }
</style>
